<template>
  <div class="container-fluid">
    <compTitle :prop_items="data_titles" />
    <ul class="product_title">
      <li>
        <b-form inline>
          <span class="product_span">商品类型</span>
          <b-form-select
            v-model="product_option_form.productId"
            :options="data_options_productTypes"
            value-field="id"
            text-field="name"
          ></b-form-select>
        </b-form>
      </li>
      <li>
        <b-form inline>
          <span class="product_span">商品名称</span>
          <b-form-input
            id="product_name_input"
            v-model="product_option_form.name"
            type="text"
          ></b-form-input>
        </b-form>
      </li>
      <li>
        <b-button class="search" variant="primary" @click="productSearch()">搜索</b-button>
      </li>
      <li>
        <b-button variant="primary" @click="productModel = !productModel">增加商品</b-button>
      </li>
    </ul>
    <div class="product_select">

    </div>
    <b-modal
      id="productModel"
      v-model="productModel"
      :title="title"
      size="lg"
      @hidden="resetModal"
      @ok="handleOk"
    >
      <div class="registered col-10">
        <b-form inline>
          <label class="col-3">用户名</label>
          <b-form-input
            type="text"
            v-model="product_form.name"
            aria-describedby="name_input"
            :state="nameState"
            class="col-8"
          ></b-form-input>
          <b-form-invalid-feedback id="name_input">{{nameValid}}</b-form-invalid-feedback>
        </b-form>
        <b-form inline>
          <label class="col-3">数量</label>
          <b-form-input
            type="text"
            v-model="product_form.number"
            aria-describedby="number_input"
            :state="numberState"
            class="col-8"
          ></b-form-input>
          <b-form-invalid-feedback id="number_input">{{numberValid}}</b-form-invalid-feedback>
        </b-form>
        <b-form inline>
          <label class="col-3">商品类型</label>
          <b-form-select
            class="col-8"
            v-model="product_form.typeId"
            :options="productTypes"
            value-field="id"
            text-field="name"
          ></b-form-select>
        </b-form>
        <b-form inline>
          <label class="col-3">描述</label>
          <b-form-textarea
            :state="descriptionState"
            aria-describedby="description_input"
            v-model="product_form.description"
            class="col-8"
          ></b-form-textarea>
          <b-form-invalid-feedback id="description_input">{{descriptionValid}}</b-form-invalid-feedback>
        </b-form>
      </div>
    </b-modal>
    <b-table
      class="col-11"
      responsive
      striped
      bordered
      small
      hover
      head-variant="dark"
      stacked="md"
      :items="products"
      :fields="data_fields"
      :current-page="currentPage"
      :per-page="perPage"
    >
      <template v-slot:cell(operating)="row">
        <b-button class="edit" variant="info" @click="editProduct(row.item.id,row.item)">编辑</b-button>
        <delet class="delet" :itemID="row.item.id" v-on:deleteRange="delet">删除</delet>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="totalRows"
      :per-page="perPage"
      align="left"
      aria-controls="table-with-pagination"
    >
    </b-pagination>
  </div>
</template>
<script>
import compTitle from '../../components/compTitle/index';
import Delet from "../../components/delete.vue";
import { UTCToLocalFormat } from "../../assets/js/date";
import { mapActions, mapState } from "vuex";


export default {
  components: {compTitle, Delet },
  data() {
    return {
      data_titles: [{
        text: "商品"
      }],
      title: "添加商品",
      productModel: false,
      editProductId: "",
      data_fields: [
        {key: "name", label: "商品名称", sortable: true},
        {key: "number", label: "数量", sortable: true},
        {key: "typeId", label: "商品id", visible: false}, //隐藏typeId
        {key: "typeName", label: "商品类型", sortable: true},
        {key: "description", label: "描述"},
        {
          key: "createTime",
          label: "注册时间",
          formatter(value) {
            return UTCToLocalFormat(value);
          },
          sortable: true
        },
        {key: "operating", label: "操作"}
      ],
      //state=null表示输入框未验证，默认状态;true输入有效，显示绿色边框;false输入无效，显示为红色边框。
      nameState: null,
      numberState: null,
      descriptionState: null,
      nameValid: "",
      numberValid: "",
      descriptionValid: "",
      currentPage: 1,
      perPage: 3,
      product_form: {
        //商品类型信息
        name: "",
        description: "",
        number: "0",
        typeId: "1",
      },
      //查询数据
      product_option_form: {
        productId: "",
        name: "",
      },

    }
  },
  computed: {
    ...mapState({
      products: (state) => state.product.products, //商品数据
      productTypes: (state) => state.productType.productTypes, //商品类型数据
    }),
    totalRows: function () {
      return this.products.length;
    },
    data_options_productTypes: function() {
      let data = [
        {id: "", name: "全部"},
      ];
      data = data.concat(this.productTypes);
      // console.log("data_options_productTypes");
      // console.log(data)
      return data;
    },
  },
  mounted() {
    // this.getProducts();
    this.productSearch();
    this.getProductTypes();
  },
  created() {

  },
  methods: {
    ...mapActions([
      "getProducts",//获取商品列表
      "postProduct", //添加商品
      // "deleteProduct", //删除商品信息
      "edit_product", //编辑商品信息
      "getProductTypes",//获取商品类型列表
    ]),
    //添加后修改商品
    async handleOk(e) {
      if(this.editProductId == "") {
        //add product
        await this.postProduct(this.product_form);
        console.log(this.product_form);
        this.toast("用户添加成功", "success", "添加用户提示");
        await this.getProducts();
      }else {
        await this.edit_product({
          productId: this.editProductId,
          product_form: this.product_form,
        });
        this.toast("用户编辑成功", "success", "编辑用户提示");
        await this.getProducts();
      }
    },
    //重置模态框
    resetModal() {
      this.product_form.name = "";
      this.product_form.number = "0";
      this.product_form.description = "";
      this.product_form.typeId = 1;
      this.title = "添加商品";
      this.editProductId = "";
    },
    //编辑商品
    editProduct() {

    },
    //删除商品
    async delet(value, index) {
      console.log(value);
      console.log(index);
    },
    //搜索模型
    productSearch() {
      this.getProducts({
        name: this.product_option_form.name,
        type_id: this.product_option_form.productId,
      });
    }
  }
}
</script>
<style scoped>
.product_title {
  list-style-type: none;
  padding-left: 0;
}
.product_title li {
  display: inline-block;
  margin-right: 10px;
}
.product_span {
  margin-right: 10px;
}
.registered {
  margin: auto;
}
form {
  margin-bottom: 10px;
  /* text-align: right; */
}
form lable {
  justify-content: flex-end;
}
</style>